!function (Q) {
  var createElement = function (options) {
    options = options || {};
    var element = document.createElement(options.tagName || 'div');
    if(options.class){
      $(element).addClass(options.class);
    }
    if (options.parent) {
      options.parent.appendChild(element);
    }
    if(options.style){
      element.setAttribute('style', options.style);
    }
    if(options.css){
      $(element).css(options.css);
    }
    if(options.html){
      $(element).html(options.html);
    }
    return element;
  }
  Q.createElement = createElement;

  function PropertyPane(graph, html) {
    this._formItems = [];
    this.html = this.container = html;
    this.dom = Q.createElement({class: 'form-inline', parent: html, tagName: 'form'});
    this.graph = graph;
    this.propertyGroup = {
      "objectTypes": {},
      /*      "entityProps": {},
            "relations": {},

            "perceptionIdea": {},
            "time": {},
            "involveObj": {},
            "influenceObj": {},
            "correlation": {}*/
    };

    graph.selectionChangeDispatcher.addListener(function (evt) {
      this.datas = this.graph.selectionModel.toDatas();
    }.bind(this));
  }

  PropertyPane.prototype = {
    _formItems: null,
    clear: function () {
      $('.colorpicker-element').colorpicker('hide');
      this.dom.innerHTML = '';
      this._formItems = [];
      this._cellEditors = null;
      this.setVisible(false);
    },
    setVisible: function(visible){
      var display = visible? 'block': 'none';
      if(this.container){
        this.container.style.display = display;
      }else{
        this.dom.style.display = display;
      }
    },
    createItem: function (parent, key, property, className, type) {
      var formItem = Q.createElement({class: 'form-group '+ className, parent: parent});
      switch (type) {
        case 'text': {
          Q.createElement({
            parent: formItem,
            tagName: 'label',
            class: 'col-sm-5 font-small',
            html: key
          });
          Q.createElement({
            parent: formItem,
            class: "col-sm-6",
            html: property
          });
          break;
        }
        case 'input': {
          Q.createElement({
            parent: formItem,
            tagName: 'label',
            class: 'col-sm-3 font-small',
            html: key
          });
          Q.createElement({
            parent: formItem,
            class: "col-sm-6 form-control input-readonly input-readonly-no",
            html: '<input type="text"   name="date" value="' + property + '" readonly="readonly">'
          });
          Q.createElement({
            parent: formItem,
            class: "col-sm-3",
            html: '<input class="btn btn-default" type="button" value="启用" onclick="startInput(this)">'
          });
          break;
        }
        case 'grid': {

          var html = '<table class="table"><tr class="tab-title">';
          var panelItem = Q.createElement({class: 'panel panel-default', parent: formItem});
          var jsLength = 0;

          for (var i in property){
            if(jsLength === 0){
              for (var j in property[i]){
                html += '<th>'+j+'</th>';
              }
            }
            jsLength++;
          }
          html += "</tr>";

          for (var i in property){
            var Jslength = 0;
            html += '<tr>';
            for (var j in property[i]) {
              if(Jslength === 2) {
                html += '<td><div class="progress">' +
                  '<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"' +
                  ' style="min-width:2em;width:'+property[i][j]+'%;">' + ''+property[i][j] + '%'+'</div>' + '</div></td>';
                jsLength = 0;
              } else {
                html += '<td>' + property[i][j]+'</td>';
                Jslength++;
              }
            }
            html += '</tr>';
          }
          html += '</table>';

          Q.createElement({parent: panelItem, class: "col-sm-12", html: html});
          break;
        }
        case 'progress': {
          Q.createElement({
            parent: formItem,
            tagName: 'label',
            class: 'col-sm-4 font-small',
            html: key
          });
          Q.createElement({
            parent: formItem,
            class: "col-sm-7",
            html: '<div class="progress">' +
            '<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"' +
            ' style="min-width:2em;width:'+property+'%;">' + ''+property +'</div>' + '</div>'
          });
          break;
        }
        case 'progress_time': {
          Q.createElement({
            parent: formItem,
            tagName: 'label',
            class: 'col-sm-4 font-small',
            html: key
          });
          Q.createElement({
            parent: formItem,
            class: "col-sm-7",
            html: '<div class="progress">' +
            '<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"' +
            ' style="min-width:2em;width:' + property + '%;">' + property + '%' + '</div>' + '</div>'
          });
          break;
        }
      }
      return formItem;
    },
    defaultNzmodatl(title, html, parameter) {
      let detailHtml = '';
      if (typeof html === "object") html = html.innerHTML;
      detailHtml += (function () {
        let str = '';
        let style = '';
        if (parameter) {
          for (let i in parameter) {
            for (const j in parameter[i]) {
              style += `${j}: ${parameter[i][j]};`;
            }
          }
          str = `<div class="ps_dialog animated zoomInLeft" style="${style}">`;
        } else {
          str = `<div class="ps_dialog animated zoomInLeft">`;
        }
        return str;
      })();
      detailHtml += ` <div class="ps-dialog-head">
                        <span class="ps-dialog-title">${title}</span>
                        <span class="ps-dialog-close"><a href="javascript:;"></a></span>
                      </div>
                      <div class="ps-dialog-body">${html}</div>
                      <div class="ps-dialog-foot"></div>`;
      return detailHtml;
    },
    createItemGroup: function (title, properties) {
      const group = Q.createElement({class: 'class-group', parent: this.dom}),
        thisList = this;
      let defaultNzmodatl = Q.createElement({tagName: 'div', class: 'default-list-content'});
      Q.createElement({tagName: 'h2', parent: defaultNzmodatl, html: '对象类型', class: 'list-title'});
      if (properties['类型'] !== undefined && properties['类型'] !== []) createNode('实体类型', properties['类型']);
      Q.createElement({tagName: 'h2', parent: defaultNzmodatl, html: '实体属性', class: 'list-title'});
      if (properties['国家'] !== undefined) createNode('国家地区', properties['国家']);
      if (properties['是否机动'] !== undefined) createNode('是否机动', properties['是否机动']);
      Q.createElement({tagName: 'h2', parent: defaultNzmodatl, html: '关系属性', class: 'list-title'});
      if (properties['关系属性'] !== undefined) createNode('所有关系', properties['关系属性']);

      function createNode(key, item) {
        const list = Q.createElement({class: 'list-group', parent: defaultNzmodatl});
        Q.createElement({tagName: 'h4', parent: list, html: key + ' (' + item.count + ')', class: 'mouse-pointer'});
        for (let key2 in item.child) {
          let item2 = item.child[key2],
            str_class,
            kind_detail;
          item2.child === undefined ? str_class = '' : str_class = 'kind-detail';
          switch (key) {
            case '国家':
              key2 = '<i class="iconfont icon-state" style="color: #88f2ff;" style="color: #000;"></i>' + key2;
              break;
            case '是否机动':
              key2 = '<i class="iconfont icon-motor" style="color: #009688;"></i>' + key2;
              break;
          }
          for (const key3 in item2) {
            if (key3 !== 'child') {
              kind_detail = thisList.createItem(list, key2, item2.count, str_class, 'progress');
            }
          }

          if (item2.child) {
            for (const key3 in item2.child) {
              const item3 = item2.child[key3];
              const detail = Q.createElement({class: 'detail-group', parent: kind_detail});
              thisList.createItem(detail, key3, item3.count, 'font-gray', 'progress');
            }
          }
        }
      }
      let contentHtml = this.defaultNzmodatl(title, defaultNzmodatl);
      Q.createElement({tagName: 'div', parent: group, html: contentHtml, class: ''});
    },
    createSingleGroup: function (title, properties) {
      const group = Q.createElement({class: 'class-group', parent: this.dom}),
        thisList = this;
      if (properties === undefined) return;
      let defaultNzmodatl = `<div class="result-container">
          <div class="result-ps-panel">
            <div class="panel-ps-title">
              <i class="icon iconfont icon-entity"></i>
              <span class="title">属性</span>
            </div>
            <div class="panel-ps-body">
            `;
      defaultNzmodatl += '<ul>';
      for (const i in properties) {
        if (i !== '别名' && i !== '编号' && i !== '类型' && i !== 'uuid') {
          defaultNzmodatl += `<li>
                  <p class="left" title="${i}：${properties[i]}">${i}：${properties[i]}</p>
                  <p class="right">
                  <i class="iconfont icon-status" style="color: #1296db"></i>
                      <!--<a href="" style="margin-right: 10px;"><i class="iconfont icon-situation"></i></a>
                      <a href="" target="_blank"><i class="iconfont icon-association" style="color: #1296db"></i></a>-->
                  </p>
                </li>`;
        }
      }
      defaultNzmodatl += `</ul></div>
          </div>
          `;
      $.ajax({
        url: 'http://' + location.hostname + ':' + location.port + '/api/systemRelevance/nodeActivityAndStatus',
        // url: 'http://192.168.1.150:9000/api/systemRelevance/nodeActivityAndStatus',
        type: 'get',
        headers: {'token': sessionStorage.token},
        data: {id: properties['编号']},
        contentType: 'application/json;charset=UTF-8',
        success: function (res) {
          const sadasfa = [{
            res: {
              position : [{z: '', s: '', name: ''}, {z: '', s: '', name: ''}]
            }
          }];
          for (const i in res.rows) {
            const activity = res.rows[i];
            defaultNzmodatl += `<div class="result-ps-panel">
              <div class="panel-ps-title">`;
            if (i === 'activity') {
              defaultNzmodatl += `
                <i class="icon iconfont icon-event"></i>
                <span class ="title">相关事件</span>
                </div>
                <div class="panel-ps-body">
                  <ul>`;
              for (const j in activity) {
                defaultNzmodatl += `
                <li>
                    <span class="left event" title="${activity[j]['名称']}">${activity[j]['名称']}</span>
                    <span class="right">
                        <div class="ps-progress">
                            <div class="ps-progress-bar"><div class="ps-progress-fill" style="width: 100%;"></div></div>
                            <div class="ps-progress-percent">100%</div>
                        </div>
                    </span>
                  </li>
              `;
              }
              defaultNzmodatl += `</ul>
                     </div>
                   </div>
            `;
            } else {
              defaultNzmodatl += `
<i class="icon iconfont icon-status"></i>
<span class ="title">状态</span>
                     </div>
                     <div class="panel-ps-body">
                       <table class="ps-table">
                        <thead>
<tr>
                  <th style="text-align: left;">状态</th>
                  <th style="text-align: center;">重要度</th>
                </tr></thead><tbody>`;
              for (const j in activity) {
                defaultNzmodatl += `<tr>
                  <td>${activity[j]['名称']}</td>
                  <td style="text-align: center;"><span style="color: #ff3838;">重要</span></td>
                </tr>`;
              }
              defaultNzmodatl += `</tbody>
                      </table>
                     </div>
                   </div>
                 </div>
            `;
            }
          }
        },
        error: function (res) {
          window.location.href = '/login';
        }
      });
      setTimeout( ()=>{
        // console.log(defaultNzmodatl);
        let contentHtml = this.defaultNzmodatl(title, defaultNzmodatl + ``);
        Q.createElement({tagName: 'div', parent: group, html: contentHtml, class: ''});
      },600);
    },
    createPerceptionIdeaGroup: function (title, properties) {
      let group = Q.createElement({class: 'class-group', parent: this.dom});
      Q.createElement({tagName: 'h3', parent: group, html: title, class : 'header-title'});
      let i = 1;
      for (let key in properties) {
        let list = Q.createElement({class: 'list-group', parent: group});
        let item = properties[key];
        if (item.child) {
          for (let key2 in item.child) {
            if (i === 1) {
              this.createItem(list, key, key2, 'perception-input','input');
            } else {
              this.createItem(list, key, key2, 'perception-input','progress_time');
            }
          }
        }
        i++;
      }

      let list = Q.createElement({class: 'list-group', parent: group});
      let html = '<div class="dropdown whiteStar" style="height: 40px;margin: 0 28px">' +
        '    <div class="input-group">' +
        '        <input placeholder="重要程度" readonly type="text" class="form-control form-default" aria-label="...">' +
        '        <div class="input-group-btn">' +
        '            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">选择警示颜色</button>' +
        '            <ul class="dropdown-menu dropdown-menu-right">' +
        '                <li><a href="javascript:void(0)" onclick="option_color(this,0)">红色</a></li>' +
        '                <li><a href="javascript:void(0)" onclick="option_color(this,1)">蓝色</a></li>' +
        '                <li><a href="javascript:void(0)" onclick="option_color(this,2)">绿色</a></li>' +
        '                <li><a href="javascript:void(0)" onclick="option_color(this,3)">黄色</a></li>' +
        '                <li><a href="javascript:void(0)" onclick="option_color(this,4)">白色</a></li>' +
        '            </ul>' +
        '        </div>' +
        '    </div>' +
        '</div>';
      Q.createElement({parent: list, class: "form-group", html: html});
    },
    createTimeionGroup: function (title, properties) {
      var group = Q.createElement({class: 'class-group', parent: this.dom});
      Q.createElement({tagName: 'h3', parent: group, html: title, class : 'header-title'});
      for (var key in properties) {
        var list = Q.createElement({class: 'list-group', parent: group});
        var item = properties[key];
        if (item.child) {
          for (var key2 in item.child) {
            if (key === '最新预警') {
              key = '<img src="/perception/images/menu/menu12.png">' + key;
            } else {
              key = '<img src="/perception/images/menu/menu2.png">' + key;
            }
            this.createItem(list, key, key2, 'perception-input','text');
          }
        }
      }
    },
    createInvolveObjGroup: function (title, properties) {
      const group = Q.createElement({class: 'class-group', parent: this.dom});
      Q.createElement({tagName: 'h3', parent: group, html: title, class : 'header-title'});
      if (properties.length !== undefined) {
        for (const key in properties) {
          const list = Q.createElement({class: 'list-group', parent: group});
          for (const key2 in properties[key]) {
            const i = 1;
            for (const key3 in properties[key][key2]) {
              const item = properties[key3];
              if (item) {
                if (i === 1) {
                  if ( key2 !== '对象') {
                    this.createItem(list, key2, properties[key][key2], 'perception-input mouse-pointer', 'text');
                  }
                } else {
                  if ( key2 === '对象') {
                    this.createItem(list, key2, properties[key][key2], 'perception-input', 'grid');
                  }
                }
              }
              i ++;
            }
          }
        }
      } else {
        const i = 1;
        for (const key in properties) {
          const list = Q.createElement({class: 'list-group', parent: group});
          const item = properties[key];
          if (item) {
            if (i === 1) {
              this.createItem(list, key, item, 'perception-input', 'text');
            } else {
              this.createItem(list, key, item, 'perception-input', 'grid');
            }
          }
          i++;
        }
      }
    },
    createInfluenceObjGroup: function (title, properties) {
      const group = Q.createElement({class: 'class-group', parent: this.dom});
      Q.createElement({tagName: 'h3', parent: group, html: title, class : 'header-title'});
    },
    createCorrelationGroup:  function (title, properties) {
      var group = Q.createElement({class: 'class-group', parent: this.dom});
      Q.createElement({tagName: 'h3', parent: group, html: title, class : 'header-title'});
      for (var key in properties) {
        var list = Q.createElement({class: 'list-group', parent: group});
        for (var key2 in properties[key]) {
          var item = properties[key][key2];
          this.createItem(list, key2, '<a href="' + item + '">简介链接</a>', 'perception-input', 'text' );
        }
      }
      // var list = Q.createElement({class: 'list-group', parent: group , html: '<a href="'+properties+'">简介来源</a>'});
    },
    mergeItem(group, datas) {
      for (const key in datas) {
        const data = datas[key];
        if (data === undefined) return;
        if (!group[key]) {
          group[key] = {count: 0, child: {}};
        }
        if (typeof data == 'string') {
          if (!group[key]['child'][data]) {
            group[key]['child'][data] = {count: 0};
            group[key].count++;
          }
          group[key]['child'][data].count++;
        } else {
          if (!group[key]['child'][data.type]) {
            group[key]['child'][data.type] = {count: 0, child: {}};
          }
          if (!group[key]['child'][data.type]['child'][data.name]) {
            group[key]['child'][data.type]['child'][data.name] = {count: 0};
          }
          group[key]['child'][data.type].count++;
          group[key]['child'][data.type]['child'][data.name].count++;
        }
      }

      return group;
    }
  };

  Object.defineProperties(PropertyPane.prototype, {
    datas: {
      get: function () {
        return this._datas;
      },
      set: function (datas) {
        if (this._datas === datas) {
          return;
        }
        if (datas && !Q.isArray(datas)) {
          datas = [datas];
        }
        this.clear();
        if (!datas.length) {
          this._datas = null;
          return;
        }
        this._datas = datas;
        this._nodeCount = 0;

        this.setVisible(true);
        linkAttr = [];
        for (let i = 0; i < datas.length; i++) {
          let data = datas[i];
          if (data.attr !== undefined) linkAttr.push(data.attr['编号']);
        }


        if (datas.length > 1) {
          this.propertyGroup.objectTypes = {};
          for (let i = 0; i < datas.length; i++) {
            let data = datas[i];
            if (data.attr) {
              // this.propertyGroup.objectTypes = data.attr;
              this.mergeItem(this.propertyGroup.objectTypes, data.attr);
              this._nodeCount++;
            }
          }
          this.createItemGroup('对象类型', this.propertyGroup.objectTypes);

          let class_group = $('.class-group');
          class_group.find('.mouse-pointer').click(function () {
            $(this).parent('.list-group').eq(0).find('.form-group:last-child').toggle();
            // $(this).hasClass('start-select') ? $(this).removeClass('start-select') : $(this).addClass('start-select');
          });
          class_group.find('.kind-detail').find('.font-small').click(function () {
            $(this).siblings('.detail-group').toggle();
          });
        } else {
          this.createSingleGroup('对象信息', datas[0].attr);
        }
      }
    }
  });
  Q.PropertyPane = PropertyPane;
}(Q);